<template>
    <el-card>
      <el-input placeholder="请输入" style="width:200px" class="mr_20" v-model="roleName"></el-input>
      <el-button icon="el-icon-search" type="primary" @click="searchClick">查询</el-button>
      <el-button @click="clear">清空</el-button>
      <div class="mb_20 mt_20"></div>
      <el-button type="primary">添加</el-button>
      <el-button type="danger" class="mr_20">批量删除</el-button>
      <el-table border class="mt_20" :data="roleList">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column label="角色名称" prop="roleName" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="400">
          <template #default="{row,$index}">
            <el-button class="mr_10" type="info" icon="el-icon-info" size="small" @click="chagneRout(row)"></el-button>
            <el-button class="mr_10" type="primary" icon="el-icon-plus" size="small"></el-button>
            <el-button class="mr_10" type="primary" icon="el-icon-edit" size="small"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="small"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10,20,30]"
        :page-size="5"
        layout=" prev, pager, next, jumper, ->, sizes,total"
        :total="total"
      >
      </el-pagination>
    </el-card>
  
</template>

<script>
import {getroleList} from "@/api/pro/useRole"
export default {
  name:"Acl",
  data() {
    return {
      page: 5,
      current: 1,
      total: 0,
      roleList: [],
      roleName:''
    }
  },

  methods:{
     // 每页条数
    handleSizeChange(page) {
      this.page = page;
      this.setinfoList();
    },
    // 当前页
    handleCurrentChange(current) {
      this.current = current;
      this.setroleList();
    },
    // 获取列表数据
    async setroleList(){
      try {
        let result = await getroleList(this.current,this.page,this.roleName)
        this.roleList = result.data.items
        this.total = result.data.total
      } catch (error) {
        console.log(error);
      }
    },
    // 点击查询的回调
    searchClick(){
      this.setroleList()
    },
    // 点击清空的回调
    clear(){
      this.roleName = ''
       this.setroleList()
    },
    // 点击切换页面路由回调
    chagneRout(row){
      this.$router.push(`/acl/role/list/auth/${row.roleName}/${row.id}`)
    }
  },
  mounted(){
    this.setroleList()
  }
}
</script>

<style>
  
</style>